<!DOCTYPE html>
<html>
<head>
    <title>小工具</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./webjars/bootstrap/4.5.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <script src="./webjars/jquery/3.4.1/jquery.min.js"></script>
    <script src="./webjars/popper.js/1.16.0/popper.min.js"></script>
    <script src="./webjars/bootstrap/4.5.3/js/bootstrap.min.js"></script>
    <script src="./webjars/layer/dist/layer.js"></script>
    <link rel="icon" href="./img/favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon"/>
    <style>
        .full-h {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
<div id="head">
</div>
<script>
    $("#head").load("./head.html", function () {
        $("#index").addClass("active");
    });
</script>
<form class="container-fluid mt-5">
    <div class="row" style="min-height: 100px;padding-top: 15px">
        <div class="col-8" style="display: flex;flex-direction: column;justify-content: center;">
            <div class="col-10">
                <div class="input-group mt-3 mb-3">
                    <div class="input-group-prepend">
                        <button type="button" class="btn btn-custom dropdown-toggle" data-toggle="dropdown">
                            选择地址
                        </button>
                        <div class="dropdown-menu">
                            <p class="dropdown-item address-item" value="0">开发环境</p>
                            <p class="dropdown-item address-item" value="1">测试环境</p>
                            <p class="dropdown-item address-item" value="2">验证环境</p>
                            <p class="dropdown-item address-item" value="3">生产环境</p>
                        </div>
                    </div>
                    <input type="text" class="form-control" id="address" placeholder="网站地址">
                </div>
            </div>
        </div>
        <div class="col" style="display: flex;flex-direction: column;justify-content: center;">
            <div class="btn-group" style="display: flex;justify-content: flex-end;">
                <button type="button" class="btn btn-custom" id="testBtn">示例</button>
                <button type="button" class="btn btn-custom-end" id="sendBtn">发送</button>
            </div>
        </div>
    </div>
    <div class="row" style="min-height: 500px ;padding-top: 15px">
        <div class="col full-h">
            <div class="form-group full-h">
                <textarea class="form-control full-h" rows="5" id="send" placeholder="请输入发送报文"></textarea>
            </div>
        </div>
        <div class="col full-h">
            <div class="form-group full-h">
                <textarea class="form-control full-h" rows="5" id="receive" placeholder="待接收报文"></textarea>
            </div>
        </div>
    </div>
</form>
</body>
<script>
    var address = [
        "170.101.101.229:9119",
        "170.101.101.232:9119",
        "170.130.201.1:9119",
        "10.12.1.11:9119"];
    var testXml =
        "<service>\n" +
        "  <SYS_HEAD>\n" +
        "    <ServiceCode>30013000001</ServiceCode>\n" +
        "    <ServiceScene>02</ServiceScene>\n" +
        "    <ConsumerId>100450</ConsumerId>\n" +
        "    <ConsumerSeqNo>201902180000084896</ConsumerSeqNo>\n" +
        "    <OrgConsumerSeqNo>201902180000084898</OrgConsumerSeqNo>\n" +
        "    <TranDate>20190218</TranDate>\n" +
        "    <TranTime>150418</TranTime>\n" +
        "    <FilFlg>0</FilFlg>\n" +
        "    <ChannelTyp>72</ChannelTyp>\n" +
        "  </SYS_HEAD>\n" +
        "  <APP_HEAD>\n" +
        "    <TellerNo>custom</TellerNo>\n" +
        "    <BranchId>101001</BranchId>\n" +
        "  </APP_HEAD>\n" +
        "  <BODY>\n" +
        "    <AcctNo>6230710108010015955</AcctNo>\n" +
        "    <CtyStmFlg>0</CtyStmFlg>\n" +
        "  </BODY>\n" +
        "</service>";
    $(document).ready(function () {
        $(".address-item").click(function () {
            var type = parseInt($(this).attr("value"));
            console.log(type)
            switch (type) {
                case 0:
                case 1:
                case 2:
                case 3:
                    $("#address").val(address[type]);
                    break;
                default:
                    $("#address").val("");
            }
        });
        $("#testBtn").click(function () {
            $("#send").val(testXml)
            $("#address").val(address[1]);
        });
        $("#sendBtn").click(function () {
            var address = $("#address").val();
            if (!address) {
                return;
            }
            var infos = address.split(":");
            if (infos.length !== 2) {
                return;
            }
            var xml = $("#send").val();
            if (!xml) {
                return;
            }
            var xmlHead = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
            if (xml.indexOf(xmlHead) === -1) {
                xml = xmlHead + xml;
            }
            var layerIndex = layer.load(2);
            $.ajax({
                url:"/result",
                type:"POST",
                contentType:"application/json; charset=utf-8",
                data:JSON.stringify({
                    ip: infos[0],
                    port: infos[1],
                    xml: xml
                }),
                success: function (data, status) {
                    layer.close(layerIndex);
                    if (status === 'success') {
                        $("#receive").val(data.data)
                    } else {
                        alert(error())
                    }
                }
            })

        })
    })
</script>
</html>
